<template>
  <div>
    <div class="wrap">
      <div class="content">
        <!---->
        <div class="outer-container">
          <!--      文章分类    -->
          <el-card class="box-card">
            <div v-for="(item,index) in classify" :key="index" class="text item">
              <span class="classify" @click="handleClassify(item)" v-text="item"></span>
            </div>
          </el-card>
          <br>


          <!--     echarts图表     -->
          <!-- 下方文章内容     -->
          <el-row :gutter="24">
            <el-card class="box-card-article" shadow="hover">
              <div id="pie" style="width:100%;height: 300px"></div>
            </el-card>
          </el-row>

          <!-- 下方文章内容     -->
          <el-card v-show="cardArticle" class="box-card-article">
            <el-row :gutter="24">
              <el-empty v-if="!cardArticle && blogs.length <=0"
                        description="暂时没有数据"
                        image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>

              <el-col class="card" :span="6" v-for="(item,index) in blogs" :key="index">
                <!--             如果没有内容则显示空状态  -->

                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <div>
                    <el-image
                      style="width: 100%;  height: 280px;position: relative;"
                      :src="item.articleCover"
                      :fit="'fit'">
                    </el-image>
                    <el-link :underline="false"><h4>{{ item.articleTitle }}</h4></el-link>
                    <el-divider></el-divider>
                  </div>
                  <div>
                    <div>
                      <span style="float: right;  font-size: 15px;  color: #9d9898;">{{ item.articleClassify }}</span>
                    </div>
                    <br> <br> <br>
                    <div class="bottom clearfix">
                      <time class="time">{{ item.createTime }}</time>
                      <!--                      <el-button type="text" class="button">操作按钮</el-button>-->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getArticleCountByClassify} from "../../request/request";

export default {
  name: "BlogsByClassify",
  data() {
    return {
      cardArticle: false,

      classify: [],

      blogs: [],

      articleCounts: [],

      data: [],
    }
  },

  methods: {
    getClassifyList() {
      this.$request.getClassifyList(this.$user).then((data) => {
        this.classify = data.data
      })
    },

    /**
     * 获取指定分类的文章
     * @param value 分类名
     */
    handleClassify(value) {
      //显示这个card
      this.cardArticle = true
      this.$request.getArticleByClassify(value, this.$user).then((data) => {
        this.blogs = data.data
      })
    },

    /**
     * 按照分类获取文章数量
     */
    getArticleCountByClassify() {
      this.$request.getArticleCountByClassify(this.$user).then((data) => {
        this.setChart(data.data)
      })
    },

    setChart(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('pie'))

      // 绘制图表
      myChart.setOption({
        title: {
          text: '分 类 可 视 化',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '分 类',
            type: 'pie',
            radius: '50%',
            data: data,
            /*   data: [
                 {value: 1048, name: 'Search Engine'},
                 {value: 735, name: 'Direct'},
                 {value: 580, name: 'Email'},
                 {value: 484, name: 'Union Ads'},
                 {value: 300, name: 'Video Ads'}
               ],*/
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  },

  created() {
    this.getClassifyList()
  },


  mounted() {
    this.getArticleCountByClassify()
  },

}
</script>

<style scoped>


.classify {
  width: 75px;
  height: 45px;
  display: block;
  cursor: pointer;
  margin: 15px;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 10px;
  justify-content: center;
}


.box-card {
  width: 100%;
  margin: auto;

}

.box-card-article {
  width: 100%;
  /*margin: auto;*/
  margin-bottom: 10px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  float: left;
  font-size: 23px;
  justify-content: center;
  align-content: center;

  text-align: center;
  line-height: 45px;
}

.center {
  width: 100%;
  min-height: 330px;
  margin: auto;
  /*background-color: #b90d0d;*/
  padding-top: 20px;
}

.content {
  width: 60%;
  margin: auto;
}

.wrap {
  width: 100%;
  min-height: 330px;
  background-color: #ffffff;

}
</style>
